<template>
  <div class="radio_unit">
    <el-radio-group v-model="inputValue" :disabled="disabled">
      <el-radio
          v-for="(item, index) in list"
        :key="index"
        :value="item[options.value]"
      >
        {{ item[options.label] }}
      </el-radio>
    </el-radio-group>
  </div>
</template>
<script lang="ts" setup>
import { ref} from "vue";
const props = defineProps({
  value: {
    type: [String, Number],
    default: "",
  },
  list: {
    type: Array<any>,
    default:[],
  },
  options: {
    type: Object,
    default: {
      label: "label",
      value: "value",
    },
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const inputValue = ref(props.value);
</script>

<style lang="scss" scoped>
</style>
<style lang="scss">
.radio_unit {
  .el-radio__input.is-checked .el-radio__inner {
    background: var(--main-white);
    border: 1px solid var(--theme-primary);
  }
  .el-radio__input.is-checked .el-radio__inner::after {
    width: 50%;
    height: 50%;
    background-color: var(--theme-primary);
    transform: translate(-50%, -50%) scale(1);
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 3.5px;
    content: "";
  }
}
</style>